<template>
  <van-address-list v-model="userid" :list="myList" disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />

  <van-popup v-model:show="show" :style="{ padding: '64px' }">
    <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result :address-info="addressInfo" :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" />
  </van-popup>
</template>

<script setup lang="ts">
import { areaList } from '@vant/area-data'
import {
  getAddressList,
  queryAddress,
  getAdd,
  updateAddress,
  deleteAddress,
} from '@/apis/address'

import { onMounted, reactive, ref } from 'vue'

import { showToast } from 'vant'

const userid = ref(localStorage.getItem('userid'))

const list = ref([])  // 接口有数据就用这个list变量


// 静态数据  接口没有数据用 initAddres  myList
let initAddres = [
  {
    address: '山东省运城市稷山县123',
    addressDetail: '123',
    addressid: 'address_7bbc1749-87df-40e9-8f6f-e66bea85d479',
    city: '运城市',
    county: '稷山县',
    id: undefined,
    isDefault: false,
    name: '张三',
    province: '山西省',
    tel: '12345678909',
    userid: 'user_2d4f9821-9716-4147-98db-748ad0c45e8f',
  },

]

const myList = ref(JSON.parse(localStorage.getItem('address')) || initAddres)


//   接口初始化函数  如果接口有数据就用这个  initAddressList 函数
const initAddressList = () => {
  getAddressList({ userid: userid.value }).then((res) => {
    // console.log(res)
    res.data.forEach((item) => {
      // 对每个item 增加 id  跟 address 字段  vant  组件需要用到这个两个字段
      item.id = item.useid

      item.address =
        item.province + item.city + item.county + item.addressDetail
    })

    console.log(res.data) // 添加完 id 跟 address 后的数据

    list.value = res.data // 赋值给  list 




  })
}


onMounted(() => {
  initAddressList()
})


// 本地缓存初始化函数  接口没有数据用 myAddressInit 方法
const myAddressInit = () => {
  let allAddress = JSON.parse(localStorage.getItem('address')) || []

  myList.value = allAddress


}


const isAdd = ref(false) // 判断 是新增地址还是编辑地址

const show = ref(false) // 定义弹框

const onAdd = () => {
  showToast('新增地址')
  show.value = true
  isAdd.value = true
}

const addressInfo = ref({})
const onEdit = (item, index) => {
  showToast('编辑地址:' + index)
  show.value = true
  isAdd.value = false

  console.log('item', item)
  addressInfo.value = item
}

// 新增的按钮

// 1 发送请求
//2  成功后关闭
// 3  重新获取用户的地址
// 4 地址展示

const onSave = (val) => {
  if (isAdd.value == true) {
    // 新增地址的逻辑

    let data = {
      ...val,
      userid: userid.value,
    }


    // 接口有数据就用 getAdd 方法
    // getAdd(data).then((res) => {
    //   console.log('add', res)

    //   show.value = false

    //   // initAddressList()

    //   // 因为接口的问题我们采用本地缓存的方法解决   
    // })


    //  接口没有数据就用本地缓存方法
    setTimeout(() => {
      let allAddress = [...myList.value, data]

      localStorage.setItem('address', JSON.stringify(allAddress))

      show.value = false

      myAddressInit()

    }, 1000)





  } else {
    let data = {
      ...val,
      userid: userid.value,
    }

    // 编辑地址的逻辑
    updateAddress(data).then((res) => {
      console.log('update', res)

      show.value = false

      initAddressList()
    })
  }
}



const onDelete = (val) => {
  showToast('delete')
  console.log(val.addressid)

  deleteAddress({ addressid: val.addressid }).then((res) => {
    console.log('delete', res)

    show.value = false

    initAddressList()
  })
}

const onChangeDetail = (val) => { }

onMounted(() => {
  queryAddress({ userid: userid.value }).then((res) => {
    console.log('queery', res)
  })
})
</script>

<style scoped></style>
